<template>
  <div v-loading="loading" :element-loading-text="tips" class="task-template dashboard-container">
    <div class="searchArea">
      <el-button style="position: relative; left: 4%;" @click="startList">批量启动</el-button>
      <el-button style="position: relative; left: 4%;" @click="stopList">批量暂停</el-button>
      <el-form ref="form" class="butt-stop" inline>
        <el-form-item label="业务系统：">
          <el-select v-model="form.businessSystemId" style="width: 180px" @change="search">
            <el-option
              v-for="(item,index) in businessList"
              :key="index"
              :label="item.businessSystemName"
              :value="item.businessSystemId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="任务状态：">
          <el-select v-model="form.taskStatus" style="width: 180px" @change="search">
            <el-option
              v-for="(item,index) in stateList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接入方式：">
          <el-select v-model="form.taskAccessWay" style="width: 180px" @change="search">
            <el-option
              v-for="(item,index) in taskAccessWayList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="keyword"
            class="searchTxt"
            clearable
            placeholder="请输入查询条件"
            @keyup.enter.native="search"
          >
            <i
              slot="suffix"
              style="line-height: 35px;"
              class="font_family iconfont icon-sousuo"
              @click="search"
            ></i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <!-- 表格数据  :height="$refs.multipleTable && $refs.multipleTable.$el.offsetHeight"-->
    <div class="main-content main-task">
      <el-table
        ref="multipleTable"
        class="flex-1 is-vertical main-task"
        stripe
        height="calc(100vh - 260px)"
        tooltip-effect="light"
        style="margin: 20px 60px; width:95%"
        :data="tableData"
      >
        <el-table-column fixed width="60" type="selection" :selectable="selectAble"></el-table-column>
        <el-table-column fixed label="序号" width="60">
          <template slot-scope="scope">{{ indexMethod(scope.$index) }}</template>
        </el-table-column>

        <el-table-column label="监控" width="200" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="接入源连接" placement="top">
              <i
                class="indicate iconfont icon-jieruyuanlianjie"
                :class="classColorHandel(scope.row).accessColor"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="scope.row.taskStatus!=5"
              class="item"
              effect="dark"
              content="任务执行"
              placement="top"
            >
              <i
                class="indicate iconfont icon-qidongyunhang"
                :class="classColorHandel(scope.row).runColor"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="scope.row.taskStatus!=5"
              class="item"
              effect="dark"
              content="接入对账"
              placement="top"
            >
              <i
                class="indicate iconfont icon-jieruduizhang"
                :class="classColorHandel(scope.row).jrdzColor"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="scope.row.taskStatus!=5 && scope.row.accessWay!=3"
              class="item"
              effect="dark"
              content="数据增量"
              placement="top"
            >
              <i
                class="indicate iconfont icon-shujuzengliang"
                :class="classColorHandel(scope.row).sjzlColor"
              ></i>
            </el-tooltip>
            <i v-else class="indicate task-jk-gray iconfont icon-zhanweifu icon-disabled"></i>
          </template>
        </el-table-column>
        <el-table-column
          label="业务系统"
          prop="accessBusinessSystemName"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="数据项集中文名称"
          prop="dataItemSetsChinesename"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="数据项集英文名称"
          prop="dataItemSetsEnglishname"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="接入方式" prop="accessWayName" width="150"></el-table-column>
        <el-table-column label="周期" prop="intervalMs" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ cornToDate(scope.row.intervalMs) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="接入开始时间" prop="taskStartTime" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column label="当前状态" prop="taskStatusName" width="150"></el-table-column>
        <el-table-column label="任务ID" prop="id" width="150"></el-table-column>

        <el-table-column label="操作" width="200" align="left">
          <template slot-scope="scope">
            <!-- <div class="el-tleft"> -->
            <el-tooltip class="item" effect="light" content="启动" placement="top">
              <i
                :class="{'icon-disabled':!(scope.row.taskStatus==3)}"
                class="iconfont icon-qidongyunhang"
                @click="doRun(scope.$index, scope.row)"
              ></i>
            </el-tooltip>

            <el-tooltip class="item" effect="light" content="暂停" placement="top">
              <i
                :class="{'icon-disabled':!(scope.row.taskStatus==1 || scope.row.taskStatus==2)}"
                class="iconfont icon"
                @click="stopTask(scope.$index, scope.row)"
              >&#xe691;</i>
            </el-tooltip>

            <el-tooltip class="item" effect="light" content="重汇" placement="top">
              <i
                :class="{'icon-disabled':!((scope.row.taskStatus==1 || scope.row.taskStatus==3 || scope.row.taskStatus==4)
                                &&(scope.row.accessWay == 3 || (scope.row.accessSourceDialectId ==='MySQL' || scope.row.accessSourceDialectId ==='Oracle'||
                                scope.row.accessSourceDialectId ==='SQLServer'|| scope.row.accessSourceDialectId ==='PostgreSQL' || scope.row.accessSourceDialectId ==='MongoDB')))}"
                class="iconfont OSS iconshuaxin"
                @click="doConverge(scope.$index, scope.row)"
              ></i>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="废止" placement="top">
              <i
                :class="{'icon-disabled':!(scope.row.taskStatus==1 || scope.row.taskStatus==3 || scope.row.taskStatus==4)}"
                class="iconfont icon-feizhi"
                @click="deleteRource(scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="接入源" placement="top">
              <i class="iconfont icon" @click="accessDetail(scope.$index, scope.row)">&#xe685;</i>
            </el-tooltip>
            <!-- </div> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="clearfix enc-pagination" style="padding:10px">
        <el-pagination
          style="float:right"
          background
          :current-page.sync="pageNum"
          :page-size="pageSize"
          :total="mainTableDataTotal"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, jumper,sizes,total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 接入源详情 -->
    <accessSource
      v-if="accessSourceVisible"
      ref="accessSource"
      @callBack="accessSourceVisible=false"
    ></accessSource>
  </div>
</template>

<script>
import accessSource from "./component/accessSource";
import {
  monitorSchedulerQuery,
  startJob,
  stopJob,
  annulJob,
  convergeJob,
  getBusinessList
} from "../../api/databaseManagement";

export default {
  name: "Index",
  data() {
    return {
      tips: "",
      loading: false,
      taskPeriodTypeAll: false,
      statusAll: false,
      taskPeriodType: [], // 任务类型
      status: [], // 任务状态
      taskAccessWayList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "周期增量"
        },
        {
          value: "2",
          label: "周期全量"
        },
        {
          value: "3",
          label: "一次性"
        },
        {
          value: "4",
          label: "实时"
        }
      ],
      stateList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "2",
          label: "运行"
        },
        {
          value: "3",
          label: "暂停"
        },
        {
          value: "4",
          label: "完成"
        },
        {
          value: "5",
          label: "废止"
        }
      ],
      businessList: [],
      form: {
        taskAccessWay: "",
        taskStatus: "",
        businessSystemId: ""
      },
      time: JSON.parse(JSON.stringify(this.$store.state.taskParam.time)),
      check: "",
      checktype: "",
      priority: JSON.parse(
        JSON.stringify(this.$store.state.taskParam.priority)
      ),
      pageNum: 1,
      showTaskDetail: false,
      showTaskCheck: false,
      moreSearch: false,
      showDatePicker: false,
      websock: null,
      allSecectData: {},
      // keyword: JSON.parse(JSON.stringify(this.$store.state.taskParam.keyword)),
      keyword: "",
      isDeleted: 0,
      tableData: [],
      selectionChangeData: [],
      timeDefaultShow: ["00:00:00", "23:59:59"],
      mainTableDataTotal: 0,
      reqObj: "",
      accessSourceVisible: false,
      setVisible: false
    };
  },
  components: {
    accessSource
  },
  watch: {},
  computed: {
    pageSize() {
      return this.$store.state.pageSize;
    }
  },
  updated() {
    this.$refs.multipleTable.doLayout();
  },
  filters: {
    formateDateTime(time) {
      return time ? time.substring(0, 19) : "";
    }
  },
  created() {
    this.taskPeriodType = JSON.parse(
      JSON.stringify(this.$store.state.taskParam.taskPeriodType)
    ); // 任务类型
    this.status = JSON.parse(
      JSON.stringify(this.$store.state.taskParam.status)
    );
    this.init();
    this.getBusinessList();
  },
  activated() {
    this.init(
      this.keyword,
      this.form.taskAccessWay,
      this.form.taskStatus,
      this.form.businessSystemId
    );
    this.getBusinessList();
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.$store.state.pageSize = val;
      this.init();
    },
    selectAble(row) {
      if (row.taskStatus == 4 || row.taskStatus == 5) {
        return false;
      }
      return true;
    },
    getBusinessList() {
      getBusinessList()
        .then(res => {
          this.businessList = res.data.data;
          this.businessList.splice(0, 0, {
            businessSystemId: "",
            businessSystemName: "全部"
          });
          console.log(this.businessList);
        })
        .catch(() => {});
    },
    startList() {
      const rows = this.$refs.multipleTable.store.states.selection;
      let idList = "";
      let count = 0;
      let len = 0;
      rows.forEach(row => {
        len++;
        if (row.taskStatus == 3) {
          idList = `${idList + row.id},`;
          count++;
        }
      });
      if (len === 0) {
        this.$alert("请勾选要批量启动任务的复选框", "提示", {
          type: "warning"
        });
      } else if (count != 0) {
        this.$confirm(
          `存在以下暂停任务${idList.slice(0, -1)}，确定批量启动吗？`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          const url = "";
          this.loading = true;
          // 执行运行
          const data = { taskId: idList.slice(0, -1) };
          startJob(data).then(res => {
            this.loading = false;
            if (res.data.resultCode === 0) {
              this.doMsg("批量启动成功", "success");
              this.init(
                this.keyword,
                this.form.taskAccessWay,
                this.form.taskStatus,
                this.form.businessSystemId
              );
            } else {
              this.doMsg(res.data.resultMessage, "error");
            }
          });
        });
      } else {
        this.$alert("所勾选的任务无已暂停任务", "提示", {
          type: "warning"
        });
      }
    },
    stopList() {
      const rows = this.$refs.multipleTable.store.states.selection;
      let len = 0;
      let idList = "";
      let count = 0;
      rows.forEach(row => {
        len++;
        if (row.taskStatus == 2) {
          idList = `${idList + row.id},`;
          count++;
        }
      });
      if (len === 0) {
        this.$alert("请勾选要批量暂停任务的复选框", "提示", {
          type: "warning"
        });
      } else if (count != 0) {
        this.$confirm(
          `存在以下运行任务${idList.slice(0, -1)}，确定批量暂停吗？`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          const data = {
            taskId: idList.slice(0, -1)
          };
          stopJob(data).then(res => {
            this.loading = false;
            if (res.data.resultCode === 0) {
              this.doMsg("批量暂停成功", "success");
              this.init(
                this.keyword,
                this.form.taskAccessWay,
                this.form.taskStatus,
                this.form.businessSystemId
              );
              // row.taskStatus = 2;
            } else {
              this.doMsg(res.data.resultMessage, "error");
            }
          });
        });
      } else {
        this.$alert("所勾选的任务无已运行任务", "提示", {
          type: "warning"
        });
      }
    },
    // 查询按钮
    search(val) {
      this.$store.state.taskParam.taskPeriodType = JSON.parse(
        JSON.stringify(this.taskPeriodType)
      );
      this.$store.state.taskParam.status = JSON.parse(
        JSON.stringify(this.status)
      );
      this.$store.state.taskParam.time = JSON.parse(JSON.stringify(this.time));
      this.$store.state.taskParam.priority = JSON.parse(
        JSON.stringify(this.priority)
      );
      this.$store.state.taskParam.keyword = JSON.parse(
        JSON.stringify(this.keyword)
      );
      this.pageNum = 1;
      this.allSecectData = {};
      this.init(
        this.keyword,
        this.form.taskAccessWay,
        this.form.taskStatus,
        this.form.businessSystemId
      );
    },
    // 重新汇聚
    doConverge(index, row) {
      this.$confirm('是否确认"重新汇聚"?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.singleCoverHandel(row);
        })
        .catch(() => {});
    },
    singleCoverHandel(row) {
      this.loading = true;
      const data = { taskId: row.id };
      convergeJob(data).then(res => {
        this.loading = false;
        if (res.data.resultCode === 0) {
          this.doMsg(res.data.resultMessage, "success");
          this.init(
            this.keyword,
            this.form.taskAccessWay,
            this.form.taskStatus,
            this.form.businessSystemId
          );
        } else {
          this.doMsg(res.data.resultMessage, "error");
        }
      });
    },
    // 设置表头
    sethandel() {
      this.setVisible = !this.setVisible;
    },
    mouseleave() {
      this.setVisible = !this.setVisible;
    },
    async deleteRource(row) {
      this.$confirm("确认要废止该任务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.doDel(row);
      });
    },
    // 删除
    doDel(row) {
      this.loading = true;
      const data = { taskId: row.id };
      annulJob(data).then(res => {
        if (res.data.resultCode === 0) {
          // 迭代四、不再调用其他接口，直接返回结果
          this.loading = false;
          this.doMsg("废止任务操作成功", "success");
          this.init(
            this.keyword,
            this.form.taskAccessWay,
            this.form.taskStatus,
            this.form.businessSystemId
          );
        } else {
          this.loading = false;
          this.$alert(res.data.resultMessage, "提示", {
            confirmButtonText: "确定",
            cancelButtonClass: "el-button--primary",
            type: "warning"
          });
        }
      });
    },
    // 运行、暂停
    doRun(index, row) {
      const url = "";
      this.loading = true;
      // 执行运行
      const data = { taskId: row.id };
      startJob(data).then(res => {
        this.loading = false;
        if (res.data.resultCode === 0) {
          this.doMsg("启动成功", "success");
          this.init(
            this.keyword,
            this.form.taskAccessWay,
            this.form.taskStatus,
            this.form.businessSystemId
          );
        } else {
          this.doMsg(res.data.resultMessage, "error");
        }
      });
    },
    stopTask(index, row) {
      const data = {
        taskId: row.id
      };
      stopJob(data).then(res => {
        this.loading = false;
        if (res.data.resultCode === 0) {
          this.doMsg("暂停成功", "success");
          this.init(
            this.keyword,
            this.form.taskAccessWay,
            this.form.taskStatus,
            this.form.businessSystemId
          );
          // row.taskStatus = 2;
        } else {
          this.doMsg(res.data.resultMessage, "error");
        }
      });
    },
    // 分页切换
    handleCurrentChange() {
      this.init(
        this.keyword,
        this.form.taskAccessWay,
        this.form.taskStatus,
        this.form.businessSystemId,
        true
      );
      this.tableData = [];
    },
    // 信息提示
    doMsg(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type,
        duration: 3500
      });
    },
    // 表格数据获取
    async init(keyword, taskAccessWay, taskStatus, businessSystemId, type) {
      if (!type) {
        // 如果不是分页调用该接口
        this.allSecectData = {};
      }

      this.loading = true;

      const tableParams = {
        dataItemSetsName: keyword,
        taskAccessWay,
        taskStatus,
        accessBusinessSystemIdString: businessSystemId,
        pageIndex: this.pageNum,
        pageSize: this.pageSize
      };

      try {
        const result = await monitorSchedulerQuery(tableParams);

        if (result.data.resultCode !== 0) {
          throw "异常";
        }

        // 如果不是第一页并且数据为0条，获取前一页数据
        if (result.data.data.length == 0 && this.pageNum != 1) {
          this.pageNum = this.pageNum - 1;
          this.init();
          return;
        }

        this.tableData = result.data.data.data;

        this.tableData.forEach(i => {
          if (i.taskStatus != 5) {
            return;
          }

          if (i.startTime) {
            i.taskStatus = 1;
          } else {
            i.startTime = "";
            i.endTime = "";
            i.joinDataNum = "";
          }
        });

        // 如果查询条件中有准备中但是无运行中的数据，对表数据进行过滤
        if (this.status.includes("5") && !this.status.includes("1")) {
          this.tableData = this.tableData.filter(res => res.taskStatus != "1");
        }

        this.mainTableDataTotal = result.data.data.recordTotal * 1;
      } catch (error) {
      } finally {
        this.loading = false;
      }

      this.$nextTick(() => {
        // 获取选中的行
        const selectRows = [].concat(...Object.values(this.allSecectData));

        this.tableData.forEach(i => {
          const find = selectRows.some(j => i.id === j.id);
          if (find) {
            this.$refs.multipleTable.toggleRowSelection(i, true);
          }
        });
      });
    },
    accessDetail(index, row) {
      this.accessSourceVisible = true;
      this.$nextTick(() => {
        this.$refs.accessSource.openDialogVisible(row.accessDatasourceId);
      });
    },
    indexMethod(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1;
    },
    classColorHandel(row) {
      const result = {
        accessColor: "task-jk-green",
        runColor: "task-jk-green",
        sjzlColor: "task-jk-green",
        jrdzColor: "task-jk-green"
      };
      if (row.databaseSign == "1") {
        result.accessColor = "task-jk-green";
      } else {
        result.accessColor = "task-jk-red";
      }
      if (row.taskSign == "0") {
        result.runColor = "task-jk-red";
      } else {
        result.runColor = "task-jk-green";
      }
      if (row.dataSign == "0") {
        result.sjzlColor = "task-jk-green";
      } else if (row.dataSign == "1") {
        result.sjzlColor = "task-jk-yellow";
      } else if (row.dataSign == "2") {
        result.sjzlColor = "task-jk-red";
      }
      if (row.recordSign == "0") {
        result.jrdzColor = "task-jk-green";
      } else if (row.recordSign == "1") {
        result.jrdzColor = "task-jk-yellow";
      } else if (row.recordSign == "2") {
        result.jrdzColor = "task-jk-red";
      }
      return result;
    },
    cornToDate(str) {
      if (str == null || str == "-1") {
        return "无";
      }
      const dateObj = {
        type: "",
        year: "",
        week: "",
        month: "",
        date: "",
        hour: "",
        minute: "",
        second: ""
      };
      if (str !== "-1" && str) {
        // 秒 分 时 日 月 周 年
        const arr = str.split(" ");
        if (arr.length < 3) return; // 异常数据返回
        const hourArr = arr[2].split("/");
        const minuteArr = arr[1].split("/");
        if (arr[5] !== "?") {
          // 每周
          dateObj.type = "每周";
          switch (arr[5]) {
            case "MON": {
              dateObj.week = "星期一";
              break;
            }
            case "TUE": {
              dateObj.week = "星期二";
              break;
            }
            case "WED": {
              dateObj.week = "星期三";
              break;
            }
            case "THU": {
              dateObj.week = "星期四";
              break;
            }
            case "FRI": {
              dateObj.week = "星期五";
              break;
            }
            case "SAT": {
              dateObj.week = "星期六";
              break;
            }
            case "SUN": {
              dateObj.week = "星期日";
              break;
            }
            default:
              break;
          }
          dateObj.hour = `${arr[2]}时`;
          dateObj.minute = `${arr[1]}分`;
        } else if (arr[3] !== "*" && arr[3] !== "?") {
          // 每月
          dateObj.type = "每月";
          dateObj.date = `${arr[3]}号`;
          dateObj.hour = `${arr[2]}时`;
          dateObj.minute = `${arr[1]}分`;
        } else if (hourArr.length === 2) {
          // 每隔xx小时
          dateObj.type = "每隔";
          dateObj.hour = `${hourArr[1]}时`;
        } else if (minuteArr.length === 2) {
          // 每隔xx分钟
          dateObj.type = "每隔";
          dateObj.minute = `${minuteArr[1]}分`;
        } else {
          // 每天
          dateObj.type = "每天";
          dateObj.hour = `${arr[2]}时`;
          dateObj.minute = `${arr[1]}分`;
        }
      }
      let dateStr = "";
      Object.keys(dateObj).forEach(key => {
        if (dateObj[key] !== "") {
          dateStr += dateObj[key];
        }
      });
      return dateStr;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ {
  .el-table .cell {
    line-height: 30px;
    i {
      cursor: pointer;
    }
  }
  .el-dialog__header {
    display: flex;
    .el-dialog__title {
      color: #0090ff;
    }
  }
}
.indicate {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 24px;
}
.butt-stop {
  position: relative;
  // top:55px;
  left: 25%;
  // right:110px;
}

.enc-pagination {
  float: right;
}

.right-tools {
  float: right;
  margin-left: 10px;
  a {
    font-size: 32px;
    i {
      font-size: 32px;
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.task-template {
  display: flex;
  height: 100%;
  flex-direction: column;
  .el-picker-panel__icon-btn {
    color: #303133 !important;
  }
}
.main-content {
  width: 100%;
}

.task-template {
  .el-table .cell .el-button i {
    font-size: 21px;
  }
}
.set_box {
  margin: 10px 0 20px 0;
  position: absolute;
  right: 10vh;
  .el-checkbox-group > label {
    display: block;
  }
  > span {
    /* position: absolute;
    left: 10px;
    top: 2px; */
    margin-left: 10px;
    cursor: pointer;
  }
  .el-checkbox {
    width: auto;
  }
  .set_content {
    position: absolute;
    top: 20px;
    background-color: #ffffff;
    z-index: 1001;
    border: 1px solid #e6eaed;
    padding: 8px;
    //height: 300px;
    overflow: auto;
  }
}
.el-tleft {
  i {
    padding-right: 10px;
    cursor: pointer;
    color: #009ddf;
  }
}

.task-jk-green {
  color: #89d892;
}
.task-jk-yellow {
  color: #ffdd4a;
}
.task-jk-red {
  color: #e46554;
}
.task-jk-gray {
  color: #dbdbdb;
}
.icon-disabled {
  color: #dbdbdb;
  pointer-events: none; //鼠标点击不可修改
  cursor: not-allowed;
}
.searchArea {
  display: flex;
  flex-direction: row;
  margin: 10px 0 0 0;
  .searchTxt {
    width: 259px;
    margin-right: 10px;
  }
}
.main-task {
  // height: calc(100vh - 180px);
  overflow: auto;
}
.el-input__suffix {
  top: 0px;
}
.item {
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
